<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"><br>


<div class="cls">教育</div> <br>
<div class="cls">圣地</div>   <br>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>


<script>
    /*
    HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。
    Document 对象中提供了以下获取 Element 元素对象的函数
        * getElementById() ：根据id属性值获取，返回单个Element对象
        * getElementsByTagName() ：根据标签名称获取，返回Element对象数组
        * getElementsByName() ：根据name属性值获取，返回Element对象数组
        * getElementsByClassName() ：根据class属性值获取，返回Element对象数组
     */
    //1.getElementById() ：根据id属性值获取，返回单个Element对象
    let img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";

    //2.getElementsByTagName() ：根据标签名称获取，返回Element对象数组
    let divs = document.getElementsByTagName("div");
    /*
        styte:设置元素的css样式
        innerHTML：设置元素内容
     */
    // alert(divs.length);
    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = "red";
        divs[i].innerHTML = '呵呵';
    }

    //3.getElementsByName() ：根据name属性值获取，返回Element对象数组
    let hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true; //选中
    }

    //4.getElementsByClassName() ：根据class属性值获取，返回Element对象数组
    let clss = document.getElementsByClassName("cls");
   /* for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }*/
</script>
</body>
</html>